<!DOCTYPE html>
<html>
<head>
	<script src="lib/easeljs-0.7.1.min.js" type="text/javascript"></script>
	<script src="lib/preloadjs-0.4.1.min.js" type="text/javascript"></script>
	<title></title>

</head>
<body onload="init()">
	<canvas id = "canvas" width="600" height="500" style="border:3px solid #000"></canvas>

</body>
</html>

<script type="text/javascript">
	var stage;
	function init() {
		stage = new createjs.Stage(document.getElementById('canvas'));
		createjs.Ticker.addEventListener('tick',function(e){
			stage.update()
		})
		createjs.Ticker.setFPS(60);
		drawButterflies();
	}
	function drawButterflies() {
		var imagpath = 'images/butterfly.png';
		butterfly1 = new createjs.Bitmap(imagpath);
		butterfly2 = new createjs.Bitmap(imagpath);
		butterfly3 = new createjs.Bitmap(imagpath);
		butterfly2.x = 200;
		butterfly3.x = 400;
		stage.addChild(butterfly1,butterfly2,butterfly3);
		stage.update();
		setTimeout(moveButterflies,2000)

		// body...
	}
	function moveButterflies() {
		butterfly2.y+=200;
		butterfly1.y+=200;
		butterfly3.y+=200;
	}
	</script>